<template>
  <div id="title-index">
    <div class="title-index-form">
      <p>表单选项</p>
      <div class="tag">
        <el-tag @click="tag(item.type)" v-for="item in list" :key="item.type">
          {{item.text}}
        </el-tag>
      </div>
    </div>
    <div class="title-index-content">
      表单内容
      <form-create :rule="rule" :option="option"></form-create>
    </div>
    <div class="title-index-props">
      表单属性
    </div>
  </div>
</template>

<script>
import form from "./index"
let id = 0
export default {
  data() {
    return {
      rule: [
        // this.maker.input("field", "title", "value", { disabled: true }),
      ],
      option: {
        // 行内表单模式
        inline: false,
        // 表单域标签的位置，如果值为 left 或者 right 时，则需要设置 label-width
        labelPosition: "right",
        // 表单域标签的后缀
        labelSuffix: "",
        // 是否显示必填字段的标签旁边的红色星号
        hideRequiredAsterisk: false,
        // 表单域标签的宽度，例如 '50px'。作为 Form 直接子元素的 form-item 会继承该值。支持 auto。
        labelWidth: "125px",
        // 是否显示校验错误信息
        showMessage: true,
        // 是否以行内形式展示校验信息
        inlineMessage: false,
        // 是否在输入框中显示校验结果反馈图标
        statusIcon: false,
        // 是否在 rules 属性改变后立即触发一次验证
        validateOnRuleChange: true,
        // 是否禁用该表单内的所有组件。若设置为 true，则表单内组件上的 disabled 属性不再生效
        disabled: false,
        // 用于控制该表单内组件的尺寸 medium / small / mini
        size: "medium"
      },
      list: [
        {
          text: "隐藏字段",
          type: "hidden"
        },
        {
          text: "输入框",
          type: "input"
        },
        {
          text: "数字输入框",
          type: "InputNumber"
        },
        {
          text: "自动生成",
          type: "autoComplete"
        },
        {
          text: "单选框",
          type: "radio"
        },
        {
          text: "多选框",
          type: "checkbox"
        },
        {
          text: "下拉选择框",
          type: "select"
        },
        {
          text: "开关",
          type: "Switch"
        },
        {
          text: "多级联动",
          type: "cascader"
        },
        {
          text: "日期选择器",
          type: "DatePicker"
        },
        {
          text: "时间选择器",
          type: "TimePicker"
        },
        {
          text: "颜色选择框",
          type: "ColorPicker"
        },
        {
          text: "上传",
          type: "upload"
        },
        {
          text: "评分",
          type: "rate"
        }
      ]
    }
  },
  methods: {
    tag: function (text) {
      // console.log(text)
      id = id + 1
      // text.field = `${text.field}${id}`
      form[text].field = form[text].field + id
      console.log(form[text])
      this.rule.push(form[text])
    }
  }
}
</script>

<style lang="scss">
  #title-index {
    display: flex;
    .title-index-form {
      border: 1px solid skyblue;
      min-width: 300px; // 最小宽度说明缩放最小
      max-width: 300px; // 最大宽度内容最大 不可能超过 width 所以 大小的差值就是响应式
      .tag {
        display: flex;
        flex-wrap: wrap;
        .el-tag {
          margin: 10px;
          min-width: 50px;
          &:hover {
            cursor: pointer;
            color: red;
          }
        }
      }
    }
    .title-index-content {
      border: 1px solid skyblue;
      flex: 1;
    }
    .title-index-props {
      border: 1px solid skyblue;
      min-width: 300px;
      max-width: 300px;
    }
  }
</style>
